<template>
  <a-modal v-model:visible="visible" title="报告事件" :footer="null">
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
    >
      <a-form-item
        name="select"
        label="事件类型"
        has-feedback
        :rules="[
          { required: formState.event_type, message: '事件类型不能为空!' },
        ]"
      >
        <a-select
          v-model:value="formState.event_type"
          placeholder="请输入事件类型"
        >
          <a-select-option value="相撞">相撞</a-select-option>
          <a-select-option value="刮擦">刮擦</a-select-option>
          <a-select-option value="失火">失火</a-select-option>
          <a-select-option value="翻车">翻车</a-select-option>
          <a-select-option value="其他">其他</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="事件地点"
        name="event_addr"
        :rules="[{ required: true, message: '事件地点不能为空!' }]"
      >
        <a-input v-model:value="formState.event_addr" />
      </a-form-item>

      <a-form-item
        label="事件详情"
        name="event_describe"
        :rules="[{ required: true, message: '事件详情不能为空!' }]"
      >
        <a-input v-model:value="formState.event_describe" />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button :disabled="disabled" type="primary" @click="handleOk"
          >提交</a-button
        >
        <a-button style="margin-left: 10px" @click="handleCancel"
          >取消</a-button
        >
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
import mitt from '@/mitt'
import $api from '@/request/api'
import { message } from 'ant-design-vue'
const visible = ref(false)
const formState = reactive({
  event_type: '',
  event_addr: '',
  event_describe: '',
  user_id: '',
})
const disabled = computed(() => {
  return !(
    formState.event_type &&
    formState.event_addr &&
    formState.event_describe
  )
})
let userId = JSON.parse(localStorage.getItem('id'))
formState.user_id = userId
const showModal = () => {
  visible.value = true
}
const handleOk = () => {
  visible.value = false
  $api.addEvent(formState).then((res) => {
    const { code, msg } = res
    if (code == 202) {
      message.success(msg)
    } else {
      message.error(msg)
    }
  })
  formState.event_type = ''
  formState.event_addr = ''
  formState.event_describe = ''
}
const handleCancel = () => {
  visible.value = false
  formState.event_type = ''
  formState.event_addr = ''
  formState.event_describe = ''
}
mitt.on('addModal', showModal)
</script>

<style></style>
